<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo elmenu" mode="horizontal" @select="handleSelect">
      <el-menu-item index="7">7天</el-menu-item>
      <el-menu-item index="30">30天</el-menu-item>
      <el-menu-item index="60">60天</el-menu-item>
    </el-menu>
    <el-menu :default-active="activeEngine" class="el-menu-engine elmenu" mode="horizontal" @select="handleSelectEngine">
      <el-menu-item index="baidu_pc">百度PC</el-menu-item>
      <el-menu-item index="baidu_mob">百度移动</el-menu-item>
      <el-menu-item index="three_pc">360PC</el-menu-item>
      <el-menu-item index="sougou_mob">搜狗移动</el-menu-item>
    </el-menu>
    <div ref="lineEchartsBox" v-loading="loading" style="width: 100%; height: 317px" />
  </div>
</template>

<script>
import keywordApi from '@/api/market/keywords.js'
import * as echarts from 'echarts'
export default {
  props: ['type', 'siteId', 'keywordData'],
  data() {
    return {
      loading: false,
      activeIndex: '7',
      activeEngine: 'baidu_pc',
      data: [
        {
          name: 'ip_count',
          val: 'IP数'
        },
        {
          name: 'bounce_ratio',
          val: '跳出率'
        },
        {
          name: 'avg_visit_time',
          val: '平均访问时长'
        },
        {
          name: 'trans_count',
          val: '转化次数'
        }
      ],
      subtitle: '其他',
      val: {},
      date: [], // 日期
      value1: [], // 数量
      value2: [],
      value3: [],
      value4: [],
      datetime: [], // 时间
      timetype: '1',
      site_id: '',
      name1: '排名', // 折线中文名
      name2: '百度移动',
      name3: '360PC',
      name4: '搜狗移动',
      interval: '', // X轴间隔
      keywordsData: [],
      weekDate: []
    }
  },
  watch: {
    // 监听到数据变化以后 重新调用一下callParent
    keywordData(val, value) {
      this.keywordsData = value
      this.reflashEcharts()
    },
    type(typeval, value) {
      //   this.data = val
      this.timetype = typeval
      //   this.callParent(val)
      //   this.getQxtData()
    }
  },
  created() {
    this.keywordsData = this.keywordData
    this.reflashEcharts()
  },
  methods: {
    reflashEcharts() {
      this.getData()
      this.getInit()
    },
    getData() {
      var param = {
        search_engine: this.activeEngine,
        days: this.activeIndex,
        id: this.keywordsData.id
      }
      keywordApi.keywordEcharts(param).then(res => {
        if (res.code == 0) {
          this.weekDate = res.data.days
          this.value1 = res.data.values
        }
      })
    },
    handleSelect(key) {
      this.activeIndex = key
      this.reflashEcharts()
    },
    handleSelectEngine(key) {
      this.activeEngine = key
      this.reflashEcharts()
    },
    getWeek() {
      const days = []
      var date = new Date()
      for (let i = 0; i <= 144; i += 24) {
        // 144是前六天的小时数
        const dateItem = new Date(date.getTime() - i * 60 * 60 * 1000) // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        const y = dateItem.getFullYear() // 获取年份
        let m = dateItem.getMonth() + 1 // 获取月份js月份从0开始，需要+1
        let d = dateItem.getDate() // 获取日期
        m = this.addDate0(m) // 给为单数的月份补零
        d = this.addDate0(d) // 给为单数的日期补零
        const valueItem = y + '-' + m + '-' + d // 组合
        days.push(valueItem) // 添加至数组
      }

      this.weekDate = days
      return days
    },
    // 给日期加0
    addDate0(time) {
      if (time.toString().length == 1) {
        time = '0' + time.toString()
      }
      return time
    },
    // 获取趋势数据

    init() {
      var date = this.weekDate.reverse()
      var interval = this.interval

      var option = {
        title: {
          // text: '单位: 线索数/天',
          // textStyle: {
          //   color: '#ff0', // 颜色
          //   fontStyle: 'normal', // 风格
          //   fontWeight: 'normal', // 粗细
          //   fontFamily: 'Microsoft yahei', // 字体
          //   fontSize: 18, // 大小
          //   align: 'center' // 水平对齐
          // }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            },
            crossStyle: {
              color: '#999'
            }
          }
        },
        itemStyle: {
          normal: {
            label: {
              show: true
            },
            labelLine: {
              show: true
            }
          }
        },
        toolbox: {
          feature: {
            // 右上角角标
            // dataView: { show: true, readOnly: false }
            // magicType: { show: true, type: ['line', 'bar'] }
            // restore: { show: true },
            // saveAsImage: { show: true }
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '6%',
          bottom: '1%',
          containLabel: true,
          x: 50,
          y: 50,
          x2: 50,
          y2: 60, // （控制表距离上线左右的距离）
          borderWidth: 200
        },
        xAxis: [
          {
            type: 'category',
            // data: [
            //   '1月',
            //   '2月',
            //   '3月',
            //   '4月',
            //   '5月',
            //   '6月',
            //   '7月',
            //   '8月',
            //   '9月',
            //   '10月',
            //   '11月',
            //   '12月'
            // ],
            data: date,
            boundaryGap: false, // 坐标轴两端空白
            axisLabel: { rotate: 60 },
            axisLabel: {
              interval: interval // 坐标轴间隔
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              // y轴上的y轴线条相关设置
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            axisLine: {
              // Y轴样式
              lineStyle: {
                color: '#eee'
              }
            },
            axisLabel: {
              show: true,
              // Y轴 刻度样式
              textStyle: {
                color: '#000'
              }
            }
          },
          {
            type: 'value',
            axisLine: {
              // Y轴样式
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: this.name1,
            type: 'line',
            smooth: true, // 设置折线 true为曲线
            symbol: 'circle', // 拐点形状
            symbolSize: 8, // 圆心的大小
            itemStyle: {
              // 拐点样式
              color: 'var(--huocms-com-color-primary)'
            },
            lineStyle: {
              // 折线样式
              // width: 0,
              color: 'var(--huocms-com-color-primary)'
            },
            showSymbol: true, // 显示拐点
            // data: [
            //   2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 55.4, 23.0, 16.5, 12.0, 6.2
            // ],
            data: this.value1,
            emphasis: {
              focus: 'series'
            }
          }
        ]
      }
      var myEcharts = echarts.init(this.$refs.lineEchartsBox)
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    },
    getInit() {
      this.$nextTick(() => {
        this.init()
      })
    }
  }
}
</script>

<style lang="scss">
.elmenu.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  padding: 0 12px;
}

.elmenu.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}

.elmenu .el-submenu.is-active .el-submenu__title {
  border-bottom: none;
  background-color: #4aa6fc;
  color: #fff;
}

.el-submenu__icon-arrow.el-icon-arrow-down {
  color: #fff;
}

.elmenu.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
  margin-left: 20px;
}
</style>
<style scoped>
.el-menu {
  /* width: 265px; */
  border-bottom: none;
  height: 28px;
}

.elmenu {
  display: inline-block;
  border: solid 1px #eee;
  margin-right: 20px;
}

.elmenu>.el-menu-item {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  border-right: solid 1px #eee;
  border-bottom: solid 1px #eee;
  padding: 0 12px;
  display: inline;
}

#app .elmenu>.el-menu-item.is-active {
  border-bottom: none;
  background-color: var(--huocms-com-color-primary) !important;
  color: #fff !important;
}

.elmenu>.el-submenu {
  /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
  line-height: 26px;
  flex-grow: 0;
  width: 93px;
}

.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}
</style>
